<template>
  <div>
    <div class="editor"></div>
  </div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {
  name: 'editor',
  props: {
    value: Object
  },
  data () {
    return {
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: [
            [{ 'background': ['red', 'white', 'yellow', 'blue'] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
          ]
        },
        placeholder: 'Insert text here ...'
      }
    }
  },
  mounted () {
    let dom = this.$el.querySelector('.editor')
    this.quill = new Quill(dom, this.options);
    this.quill.setContents(this.value)
    this.quill.on('text-change', () => {
      // this.$emit('input', this.quill.getContents())
    });
  }
}
</script>
